import { Activity, TrendingUp, Users, MessageCircle, Calendar, BarChart3, FileText, CheckCircle, Clock, Zap } from 'lucide-react';
import { truncateUserId } from '@/lib/utils';

interface DashboardPageProps {
  params: { userId: string };
}

// 获取用户dashboard数据的函数
async function getDashboardData(userId: string) {
  // TODO: 从实际数据源获取dashboard数据
  // const dashboardData = await fetchUserDashboard(userId);
  
  // 模拟dashboard数据
  return {
    user: {
      name: truncateUserId(userId),
      avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${userId}`,
    },
    todayTask: 123,
    overdueTask: 213,
    stats: {
      totalProject: 1206,
      completed: 240,
      inProgress: 96,
      activeProject: 18
    },
    trends: {
      totalProject: 8.2,
      completed: 8.2,
      inProgress: 8.2,
      activeProject: 8.2
    },
    chartData: [
      { month: 'Jan', value: 80 },
      { month: 'Feb', value: 85 },
      { month: 'Mar', value: 75 },
      { month: 'Apr', value: 90 },
      { month: 'May', value: 95 },
      { month: 'Jun', value: 100 },
    ]
  };
}

export default async function DashboardPage({ params: { userId } }: DashboardPageProps) {
  const dashboardData = await getDashboardData(userId);

  return (
    <div className="space-y-6">
      {/* Page Header */}
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Project Dashboard</h1>
        <button className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
          <Calendar className="h-4 w-4" />
          <span className="text-sm">Pick a date</span>
        </button>
      </div>

      {/* Main Dashboard Grid */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Welcome Card - Takes 2/3 width on large screens */}
        <div className="lg:col-span-2">
          <div className="bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl p-8 text-white relative overflow-hidden">
            <div className="relative z-10">
              <h2 className="text-2xl font-bold mb-2">Welcome Back</h2>
              <p className="text-lg font-semibold mb-6">{dashboardData.user.name}</p>
              
              <div className="flex items-center space-x-8 mb-6">
                <div>
                  <p className="text-purple-200 text-sm">Today's Task</p>
                  <p className="text-2xl font-bold">{dashboardData.todayTask}</p>
                </div>
                <div>
                  <p className="text-purple-200 text-sm">Overdue Task</p>
                  <p className="text-2xl font-bold">{dashboardData.overdueTask}</p>
                </div>
              </div>
            </div>
            
            {/* User Illustration */}
            <div className="absolute bottom-0 right-8 w-32 h-32">
              <img
                src={dashboardData.user.avatar}
                alt="User Avatar"
                className="w-full h-full object-contain"
              />
            </div>
          </div>
        </div>

        {/* Stats Cards Column */}
        <div className="space-y-4">
          {/* Total Project Card */}
          <div className="bg-white rounded-xl p-6 shadow-sm border">
            <div className="flex items-center justify-between mb-4">
              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <FileText className="h-6 w-6 text-blue-600" />
              </div>
            </div>
            <h3 className="text-gray-600 text-sm font-medium mb-1">Total Project</h3>
            <p className="text-3xl font-bold text-gray-900 mb-2">{dashboardData.stats.totalProject}</p>
            <p className="text-sm text-green-600 font-medium">
              Project Progress +{dashboardData.trends.totalProject} ↗
            </p>
          </div>

          {/* Completed Card */}
          <div className="bg-white rounded-xl p-6 shadow-sm border">
            <div className="flex items-center justify-between mb-4">
              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <CheckCircle className="h-6 w-6 text-green-600" />
              </div>
            </div>
            <h3 className="text-gray-600 text-sm font-medium mb-1">Completed</h3>
            <p className="text-3xl font-bold text-green-600 mb-2">{dashboardData.stats.completed}</p>
            <p className="text-sm text-green-600 font-medium">
              Project Progress +{dashboardData.trends.completed} ↗
            </p>
          </div>
        </div>
      </div>

      {/* Second Row Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {/* In Progress Card */}
        <div className="bg-white rounded-xl p-6 shadow-sm border">
          <div className="flex items-center justify-between mb-4">
            <div className="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
              <Clock className="h-6 w-6 text-red-600" />
            </div>
          </div>
          <h3 className="text-gray-600 text-sm font-medium mb-1">In Progress</h3>
          <p className="text-3xl font-bold text-red-600 mb-2">{dashboardData.stats.inProgress}</p>
          <p className="text-sm text-green-600 font-medium">
            Project Progress +{dashboardData.trends.inProgress} ↗
          </p>
        </div>

        {/* Active Project Card */}
        <div className="bg-white rounded-xl p-6 shadow-sm border">
          <div className="flex items-center justify-between mb-4">
            <div className="w-12 h-12 bg-cyan-100 rounded-lg flex items-center justify-center">
              <Zap className="h-6 w-6 text-cyan-600" />
            </div>
          </div>
          <h3 className="text-gray-600 text-sm font-medium mb-1">Active Project</h3>
          <p className="text-3xl font-bold text-cyan-600 mb-2">{dashboardData.stats.activeProject}</p>
          <p className="text-sm text-green-600 font-medium">
            Project Progress +{dashboardData.trends.activeProject} ↗
          </p>
        </div>

        {/* Additional Stats - 填充剩余空间 */}
        <div className="bg-white rounded-xl p-6 shadow-sm border">
          <div className="flex items-center justify-between mb-4">
            <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
              <Users className="h-6 w-6 text-purple-600" />
            </div>
          </div>
          <h3 className="text-gray-600 text-sm font-medium mb-1">Team Members</h3>
          <p className="text-3xl font-bold text-purple-600 mb-2">24</p>
          <p className="text-sm text-green-600 font-medium">
            Team Growth +12.5% ↗
          </p>
        </div>

        <div className="bg-white rounded-xl p-6 shadow-sm border">
          <div className="flex items-center justify-between mb-4">
            <div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
              <BarChart3 className="h-6 w-6 text-orange-600" />
            </div>
          </div>
          <h3 className="text-gray-600 text-sm font-medium mb-1">Revenue</h3>
          <p className="text-3xl font-bold text-orange-600 mb-2">$45.2K</p>
          <p className="text-sm text-green-600 font-medium">
            Monthly +15.3% ↗
          </p>
        </div>
      </div>

      {/* Report Chart Section */}
      <div className="bg-white rounded-xl p-6 shadow-sm border">
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-xl font-semibold text-gray-900">Report Chart</h3>
          <button className="flex items-center space-x-2 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50">
            <Calendar className="h-4 w-4" />
            <span className="text-sm">Select Date</span>
          </button>
        </div>
        
        {/* Simple Chart Placeholder */}
        <div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
          <div className="text-center">
            <BarChart3 className="h-12 w-12 text-gray-400 mx-auto mb-4" />
            <p className="text-gray-500">Chart visualization will be displayed here</p>
            <p className="text-sm text-gray-400 mt-2">Connect your analytics data to see detailed reports</p>
          </div>
        </div>
      </div>
    </div>
  );
} 